import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input, Select, DatePicker, Table, Button, TreeSelect, Popconfirm, Row, Col, } from 'antd';
var _this, _props, _state;

const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;

class AddBorrowDetailModal extends Component {
  constructor(props) {
    super(props);
  }

  addBorrowDetailHandler = () => {
    const { addBorrowDetailHandler } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        addBorrowDetailHandler(values);
        this.props.form.resetFields();
      }
    });
  };
  handlerUseBranchChange=(value)=>{
    const { dispatch} = this.props;
    this.props.form.setFieldsValue({ targetEndUser: undefined });
    dispatch({
      type: 'borrow/qryUserByDept',
      payload: {deptId:value },
    });   
  }

  render() {
    const { children, detailList, assetList, id, item, roomList, deptUserList, deptList, rackList } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6},
      wrapperCol: { span: 16 },
    };
  
    const treeData = (i) => {
      return i.map( d => {
        d.label = d.name;
        d.key = d.id_+'';
        d.value = d.id_+'';
        d.children = d.depts && d.depts.length > 0 ? treeData(d.depts) : [];
        return d;
      })
    }


    const loop = data => data.map((item) => {
      if (item.depts && item.depts.length) {
        return <TreeNode key={item.id_ + ''} title={item.name} value={item.id_ + ''}>{loop(item.depts)}</TreeNode>;
      }
      return <TreeNode key={item.id_ + ''} title={item.name} value={item.id_ + ''} />;
    });


    const getUser = data => data.map((item) => {
      return <Option key={item.id_}>{item.name}</Option>
    })
   

    return (
      <span>
        <Modal
          maskClosable={this.props.maskClosable}
          confirmLoading={this.props.confirmLoading}
          title={this.props.title}
          visible={this.props.visible}
          onOk={this.addBorrowDetailHandler}
          onCancel={this.props.onCancel}
          key={this.props.newKey}
        >
          <div style={{ width: 'auto', backgroundColor: '#fff' }}>
            <div style={{}}>
              <div style={{ width: '100%', backgroundColor: '#fff', paddingLeft: '20px' }}>

                <Form layout="horizontal" onSubmit={this.addBorrowDetailHandler}>
                  <FormItem style={{ marginBottom: '0px' }}>
                    {getFieldDecorator('assetId', { initialValue: item.id_ })(
                      <Input type="hidden" />
                    )}
                  </FormItem>
                  <FormItem
                       {...formItemLayout}
                        label="借用类型"
                        hasFeedback
                      >
                        {getFieldDecorator('borrowType', {
                          initialValue:item.borrowType?item.borrowType:'1',
                          rules: [{
                            required: true, whitespace: true, message: '请选择借用类型',
                          }]
                        })(
                          <Select
                            showSearch
                            // style={{ width: 200 }}
                            placeholder="请选择借用类型"
                            optionFilterProp="children"
                          >
                            <Option value='1'>内部借用</Option>
                            <Option value='2'>外部借用</Option>
                          </Select>
                          )}
                      </FormItem>
                 
                      <FormItem
                        {...formItemLayout}
                        label="借用管理部门"
                        hasFeedback>
                        {
                          getFieldDecorator('targetManageBranch', {
                            initialValue: item.manageBranchId_?item.manageBranchId_ + '':null,
                            rules: [{
                              required: true, message: '请选择借用管理部门',
                            }]
                          })(
                            <TreeSelect
                              showSearch
                              treeNodeFilterProp="title"
                              // style={{ width:200 }}
                              // labelInValue
                              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                              placeholder="借用管理部门"
                              allowClear
                              treeDefaultExpandAll
                              treeData={treeData(deptList)}
                            >
                            </TreeSelect>
                            )
                        }
                      </FormItem>
                 
                      <FormItem
                        {...formItemLayout}
                        label="借用部门"
                        hasFeedback>
                        {
                          getFieldDecorator('targetUseBranch', {
                            initialValue:item.useBranchId_?item.useBranchId_ + '':null,
                            rules: [{
                              required: true, message: '请选择借用部门',
                            }]
                          })(
                            <TreeSelect
                              showSearch
                              treeNodeFilterProp="title"
                              // style={{ width: 200 }}
                              // labelInValue
                              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                              placeholder="借用部门"
                              onChange={this.handlerUseBranchChange}
                              allowClear
                              treeDefaultExpandAll
                              treeData={treeData(deptList)}
                            >
                            </TreeSelect>
                            )
                        }
                      </FormItem>

                 
                      <FormItem
                        {...formItemLayout}
                        label='借用人'
                        hasFeedback
                      >
                        {getFieldDecorator('targetEndUser', {
                          initialValue:item.endUser ? item.endUser : '',
                          rules: [{
                            required: true, whitespace: true, message: '请选择借用人',
                          }]
                        })(
                          <Select
                            showSearch
                            // style={{ width: 200 }}
                            placeholder="借用人"
                            optionFilterProp="children"
                          >
                            {getUser(deptUserList)}
                          </Select>
                          )}
                      </FormItem>
                 
                  {/* <Form layout="inline"> */}
                
                      <FormItem
                        label="备注"
                        hasFeedback
                        {...formItemLayout}
                      >
                        {
                          getFieldDecorator('returnRemark', {
                            initialValue:item.returnRemark?item.returnRemark:undefined,
                            rules: [{ max: 200, message: '备注信息 200 字符以内' },]
                          })(<Input style={{ width: '600px' }} type="textarea" autosize={{ minRows: 3, maxRows:3 }} />)
                        }
                      </FormItem>
                </Form>
              </div>

            </div>
          </div>
        </Modal>

      </span>
    );
  }

}

export default Form.create()(AddBorrowDetailModal)
